<template>
  <!--  :with-header="false"-->

  <el-drawer
    :size="'25%'"
    :title="`${ type === 1? '产品1': (type === 4 ? '站点1' : '服务器6')}信息`"
    :modal="false"
    class="sitename"
    :destroy-on-close="true"
    :visible="isDrawer"
    :direction="'rtl'"
    :wrapper-closable="true"
    :before-close="handleClose"
  >
<!--   <el-scrollbar :style="{height: `calc( 100vh - 100px )`}">-->
     <!--产品-->
     <div v-if="type === 1 && isDrawer" class="product">
<!--       <div class="clearfix">-->
<!--         <div class="header fl">-->
<!--           <div class="header-items ">产品名称</div>-->
<!--           <div class="header-items ">子系统</div>-->
<!--           <div class="header-items ">版本</div>-->
<!--           <div class="header-items ">签约状态</div>-->
<!--           <div class="header-items ">合同开始时间</div>-->
<!--           <div class="header-items ">合同结束时间</div>-->
<!--         </div>-->
<!--         <vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp fl clearfix" :class-option="classOption">-->
<!--           <div v-for="(item, ind) in CardPartsStatisticsList" :key="ind" class="content fl">-->
<!--             <div class="header-items ">{{ item.product_name || '&#45;&#45;' }}</div>-->
<!--             <div class="header-items ">{{ item.product_type || '&#45;&#45;' }}</div>-->
<!--             <div class="header-items ">{{ item.version_num || '&#45;&#45;' }}</div>-->
<!--             <div class="header-items ">{{ item.status || '&#45;&#45;' }}</div>-->
<!--             <div class="header-items ">{{ item.settlement_start_date || '&#45;&#45;' }}</div>-->
<!--             <div class="header-items ">{{ item.settlement_end_date || '&#45;&#45;' }}</div>-->
<!--           </div>-->
<!--         </vue-seamless-scroll>-->
<!--       </div>-->
       <div class="web-info">
         <div v-for="(item, ind) in productInfo" :key="ind" class="web-info_line">
           <span class="webinfo-label">{{ item.label }}：</span>
           <span class="webinfo-data">{{ item.data }}</span>
         </div>
       </div>
       <LineChart :id="'test'" :text="'月活用户数'" :y-data="Users" />
       <ResponsePanel :data="data" />
     </div>

     <div v-if="type === 4 && isDrawer" class="website">
       <div class="web-info">
         <div v-for="(item, ind) in websiteInfo" :key="ind" class="web-info_line">
           <span class="webinfo-label">{{ item.label }}：</span>
           <span class="webinfo-data">{{ item.data }}</span>
         </div>
       </div>
       <!--     站点-->
       <LineChart :id="'test'" :text="'站点可用率'" :grid="params" :unit="'%'" />
       <LineChart :id="'page'" :text="'站点响应时间'" :grid="params" :unit="'%'" />
       <LineChart :id="'time'" :text="'页面错误率'" :grid="params" :unit="'%'" />
       <!--      <ResponsePanel :data="data"/>-->
     </div>

     <div v-if="type === 17 && isDrawer" class="server">
       <!--     服务器-->
       <div class="web-info">
         <div v-for="(item, ind) in info" :key="ind" class="web-info_line">
           <span class="webinfo-label">{{ item.label }}：</span>
           <span class="webinfo-data">{{ item.data }}</span>
         </div>
       </div>
       <LineChart :id="'CPU'" :text="'CPU使用率'" :x-data="time" :y-data="cpuY" :grid="serverParams" :unit="'%'" />
       <LineChart :id="'used'" :text="'内存使用率'" :x-data="time" :y-data="memoryY" :grid="params" :unit="'%'" />
       <LineChart :id="'diskUsed'" :text="['C盘使用率', 'D盘使用率']" :legend="['C盘使用率', 'D盘使用率']" :x-data="time" :y-data="used" :more="true" :grid="params" />
       <AlertPenal :data="dataAlert"></AlertPenal>
     </div>
<!--   </el-scrollbar>-->
  </el-drawer>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import LineChart from './linkChart'
import ResponsePanel from './responseItem'
import moment from 'moment'
import AlertPenal from './alertList'
export default {
  name: 'Drawer',
  components: { vueSeamlessScroll, LineChart, ResponsePanel, AlertPenal },
  props: {
    isDrawer: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: null
    }

  },
  data() {
    return {
      params: {
        top: 40,
        left: '10%',
        right: '10%',
        bottom: '20%'
      },
      serverParams: {
        top: 40,
        left: '10%',
        right: '10%',
        bottom: '25%'
      },
      classOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },
      CardPartsStatisticsList: [
        {
          product_name: '明源云ERP-售楼管理系统V2.2',
          product_type: '子系统',
          settlement_end_date: '2021-11-29 00:00:00',
          settlement_start_date: '2020-11-30 00:00:00',
          status: '首年服务期',
          subsystem: '重构售楼',
          version_num: 'V2.2' },
        {
          product_name: '明源房地产CRM—售楼管理软件V5.0--集团版',
          product_type: '子系统',
          settlement_end_date: '2021-11-08 00:00:00',
          settlement_start_date: '2020-11-09 00:00:00',
          status: '服务期',
          subsystem: '售楼',
          version_num: 'ERP3.0.3SP3' },
        {
          product_name: '明源云ERP-成本管理系统V2.2',
          product_type: '子系统',
          settlement_end_date: '2022-03-31 00:00:00',
          settlement_start_date: '2021-04-01 00:00:00',
          status: '首年服务期',
          subsystem: '重构成本',
          version_num: 'V2.2' },
        {
          product_name: '住宅ERP子系统费用预算集团版(PC)',
          product_type: '子系统',
          settlement_end_date: '2021-11-08 00:00:00',
          settlement_start_date: '2020-11-09 00:00:00',
          status: '服务期',
          subsystem: '费用预算',
          version_num: 'ERP3.0.3SP3' }
        // {
        //   product_name: '明源房地产POM—成本管理软件V5.0--集团版',
        //   product_type: '子系统',
        //   settlement_end_date: '2021-11-08 00:00:00',
        //   settlement_start_date: '2020-11-09 00:00:00',
        //   status: '服务期',
        //   subsystem: '成本',
        //   version_num: 'ERP2.5.4' }
      ],
      Users: [
        201, 129, 198, 86, 45, 85, 73, 56, 92, 98, 401, 382, 115, 111, 309, 206, 137, 128, 85, 94,
        71, 106, 84, 93, 85, 178, 83, 98, 210, 82, 69, 158, 481, 189
      ],
      data: {
        time: '4.23ms', error: '0.25%', page: '0.03%'
      },
      time: [
        1628316164000, 1628316284000, 1628316404000, 1628316524000, 1628316644000, 1628316764000, 1628316884000, 1628317004000,
        1628317124000, 1628317244000, 1628317364000, 1628317484000, 1628317604000, 1628317724000, 1628317844000, 1628317964000,
        1628318084000, 1628318204000, 1628318324000, 1628318464000, 1628318584000, 1628318704000, 1628318824000, 1628318944000,
        1628319064000, 1628319184000, 1628319304000, 1628319424000, 1628319544000, 1628319664000
      ].map((val) => {
        return moment(new Date(val)).format('YYYY-MM-DD HH:mm:ss')
      }),
      cpuY: [
        0.194368, 0.104177, 3.56803, 2.19565, 0.0871125, 2.7563, 1.86512, 0.357687, 3.7606, 0.859166, 1.34736, 2.33703, 0.343062,
        0.191931, 0.540509, 3.49733, 0.523444, 3.139, 1.9397, 1.34742, 3.90008, 6.33719, 6.45152, 4.81841, 1.60579, 0.942793,
        1.05818, 1.67512, 1.45959, 28.1793
      ],

      memoryY: [
        124001, 124000, 123999, 123998, 123998, 123999, 123998, 123998, 124001, 124030, 124008, 124007, 124006,
        124007, 124010, 124009, 124010, 124008, 124008, 124007, 124008, 124007, 124006, 124006, 124099, 124083,
        124083, 124080, 124126, 124115
      ],
      used: {
        'c': [
          26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81,
          26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.81, 26.82, 26.82, 26.82,
          26.84, 26.84, 26.84
        ],
        'd': [
          85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93,
          85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 85.93, 91.93, 93.93, 93.93, 93.93, 93.93,
          93.93, 93.93, 93.93
        ]
      },
      websiteInfo: [
        { label: '站点名称', data: 'MysoftERP303' },
        { label: '所在服务器', data: '10.10.163.85(MYERP-WEB03)' },
        { label: '主程序路径', data: 'D:\\mYSOFT\\mYSOFTerp303\\' },
        { label: '应用程序池', data: 'MysoftERP303' },
        { label: '.NET版本', data: 'v2.0' },
        { label: '端口号', data: '80|80|80|80|80' }
      ],
      info: [
        { label: '主机名', data: 'ERP-DATA-M' },
        { label: 'IP', data: '192.168.5.62' },
        { label: '操作系统', data: 'Windows1.2.8.3' },
        { label: 'CPU核数', data: '8' },
        { label: '内存', data: '150000M' }
      ],
      productInfo: [
        { label: '产品名称', data: '明源云ERP-售楼管理系统V2.2' },
        { label: '子系统', data: '重构售楼' },
        { label: '版本', data: 'V2.2' },
        { label: '签约状态', data: '首年服务期' },
        { label: '合同开始时间', data: '2020-11-30 00:00:00' },
        { label: '合同结束时间', data: '2021-11-29 00:00:00' }
      ],
      dataAlert: [
        {
          theme: 'E:磁盘空间小于10%',
          level: '警告(P2)',
          count: 5,
          date: '2021-08-07',
          status: '待处理',
          officer: '段辉硕'}
      ]
    }
  },
  computed: {},
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClose() {
      this.$emit('update:isDrawer', false)
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-drawer {
  color: #fff;
  width: 25%;
  max-width: 500px;
  min-width: 380px;
  background-color: transparent;
  .el-drawer__header {
    color: #fff ;
    font-weight: 900 ;
    font-size: 14px ;
    outline-style:none ;
  }
  .el-drawer__body {
    padding: 0 10px;
    .website {
      .link-chart-panel {
        height: 190px !important;
      }
      .response-item-panel {
        position: unset;
      }
    }
    .server {
      .link-chart-panel {
        height:160px;
      }
    }
  }
}
.seamless-warp {
  width: calc( 100% - 92px );
  overflow: hidden;
}
.header-items {
  width: 90px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 6px;
}

.header{
  &:first-of-type{
    .header-items {
      background-color: #555;
    }
  }
  &:nth-of-type(2) {
    .header-items{
      width: calc( (100% - 90px) / 5 );
    }
  }
}

  .web-info {
    margin: 0 auto;
    background-color: rgba(0,0,0,.2);
    padding:10px 15px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
    &_line {
      line-height: 30px;
    }
    .webinfo-label {
      display: inline-block;
      width: 90px;
      font-weight: 900;
    }
    .webinfo-data {
      display: inline-block;
      width: calc( 100% - 90px );
    }
  }
  .product {
    .response-item-panel {
      margin-left: 0;
    }
    .web-info{
      .webinfo-label {
        width: 110px;
      }
      .webinfo-data {
        display: inline-block;
        width: calc( 100% - 110px );
      }
    }
  }

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
